{% extends 'cinema/admin/base_admin.html' %}
{% load static %}

{% block title %}影厅管理 - 电影院票务管理系统{% endblock %}
{% block page_title %}影厅管理{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="fas fa-building me-2"></i>影厅管理</h2>
        <p class="text-muted mb-0">管理所有影厅信息，包括座位配置和状态控制</p>
    </div>
    <button type="button" class="btn btn-primary btn-admin" data-bs-toggle="modal" data-bs-target="#addHallModal">
        <i class="fas fa-plus me-2"></i>添加影厅
    </button>
</div>

<!-- 筛选和搜索 -->
<div class="admin-card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <label class="form-label">状态筛选</label>
                <select class="form-select" id="statusFilter">
                    <option value="">全部状态</option>
                    <option value="active">使用中</option>
                    <option value="inactive">停用中</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">类型筛选</label>
                <select class="form-select" id="typeFilter">
                    <option value="">全部类型</option>
                    <option value="普通厅">普通厅</option>
                    <option value="IMAX厅">IMAX厅</option>
                    <option value="VIP厅">VIP厅</option>
                    <option value="3D厅">3D厅</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">搜索影厅</label>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" id="hallSearch" placeholder="搜索影厅名称...">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 影厅列表 -->
{% if halls %}
    <div class="admin-card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>影厅列表 ({{ halls|length }} 个)</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>影厅信息</th>
                            <th>类型</th>
                            <th>容量</th>
                            <th>座位数</th>
                            <th>场次数</th>
                            <th>状态</th>
                            <th style="width: 150px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for hall in halls %}
                            <tr data-status="{{ hall.is_active|yesno:'active,inactive' }}" data-type="{{ hall.hall_type }}">
                                <td>
                                    <div>
                                        <h6 class="mb-1">{{ hall.name }}</h6>
                                        <small class="text-muted">{{ hall.description|default:"暂无描述" }}</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info badge-admin">{{ hall.hall_type }}</span>
                                </td>
                                <td>
                                    <span class="text-muted">{{ hall.capacity }} 人</span>
                                </td>
                                <td>
                                    <span class="badge bg-secondary badge-admin">{{ hall.seat_set.count }}</span>
                                </td>
                                <td>
                                    <span class="badge bg-primary badge-admin">{{ hall.screening_set.count }}</span>
                                </td>
                                <td>
                                    {% if hall.is_active %}
                                        <span class="badge bg-success badge-admin">
                                            <i class="fas fa-check me-1"></i>使用中
                                        </span>
                                    {% else %}
                                        <span class="badge bg-danger badge-admin">
                                            <i class="fas fa-ban me-1"></i>停用中
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                onclick="editHall({{ hall.id }})"
                                                title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-warning" 
                                                onclick="toggleHallStatus({{ hall.id }}, '{{ hall.name }}')"
                                                title="切换状态">
                                            {% if hall.is_active %}
                                                <i class="fas fa-ban"></i>
                                            {% else %}
                                                <i class="fas fa-check"></i>
                                            {% endif %}
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                onclick="viewSeats({{ hall.id }})"
                                                title="查看座位">
                                            <i class="fas fa-chair"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                onclick="deleteHall({{ hall.id }}, '{{ hall.name }}')"
                                                title="删除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% else %}
    <div class="admin-card">
        <div class="card-body text-center py-5">
            <i class="fas fa-building fa-4x text-muted mb-4"></i>
            <h4 class="text-muted mb-3">暂无影厅信息</h4>
            <p class="text-muted mb-4">点击上方"添加影厅"按钮开始添加您的第一个影厅</p>
            <button type="button" class="btn btn-primary btn-admin" data-bs-toggle="modal" data-bs-target="#addHallModal">
                <i class="fas fa-plus me-2"></i>添加影厅
            </button>
        </div>
    </div>
{% endif %}

<!-- 影厅统计 -->
{% if halls %}
    <div class="admin-card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>影厅统计</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-building fa-2x text-primary mb-2"></i>
                        <h5 class="mb-1">{{ halls|length }}</h5>
                        <small class="text-muted">总影厅数</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                        <h5 class="mb-1">{{ active_halls_count }}</h5>
                        <small class="text-muted">使用中</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-chair fa-2x text-info mb-2"></i>
                        <h5 class="mb-1">{{ total_seats }}</h5>
                        <small class="text-muted">总座位数</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-calendar-alt fa-2x text-warning mb-2"></i>
                        <h5 class="mb-1">{{ total_screenings }}</h5>
                        <small class="text-muted">总场次数</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<!-- 添加影厅模态框 -->
<div class="modal fade" id="addHallModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-plus me-2"></i>添加影厅</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" id="addHallForm">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">影厅名称 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">影厅类型 <span class="text-danger">*</span></label>
                        <select class="form-select" name="hall_type" required>
                            <option value="">请选择类型</option>
                            <option value="普通厅">普通厅</option>
                            <option value="IMAX厅">IMAX厅</option>
                            <option value="VIP厅">VIP厅</option>
                            <option value="3D厅">3D厅</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">容量 <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" name="capacity" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">描述</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" checked>
                            <label class="form-check-label">立即启用</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加影厅</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 筛选功能
document.getElementById('statusFilter').addEventListener('change', filterHalls);
document.getElementById('typeFilter').addEventListener('change', filterHalls);
document.getElementById('hallSearch').addEventListener('input', filterHalls);

function filterHalls() {
    const statusFilter = document.getElementById('statusFilter').value;
    const typeFilter = document.getElementById('typeFilter').value;
    const searchTerm = document.getElementById('hallSearch').value.toLowerCase();
    
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const status = row.dataset.status;
        const type = row.dataset.type;
        const text = row.textContent.toLowerCase();
        
        const statusMatch = !statusFilter || status === statusFilter;
        const typeMatch = !typeFilter || type === typeFilter;
        const searchMatch = !searchTerm || text.includes(searchTerm);
        
        if (statusMatch && typeMatch && searchMatch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// 切换影厅状态
function toggleHallStatus(hallId, hallName) {
    const action = confirm(`确定要切换影厅"${hallName}"的状态吗？`);
    if (action) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="toggle">
            <input type="hidden" name="hall_id" value="${hallId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

// 编辑影厅
function editHall(hallId) {
    // 实现编辑影厅功能
    alert('编辑影厅功能待实现');
}

// 查看座位
function viewSeats(hallId) {
    // 实现查看座位功能
    alert('查看座位功能待实现');
}

// 删除影厅
function deleteHall(hallId, hallName) {
    const action = confirm(`确定要删除影厅"${hallName}"吗？此操作不可恢复！`);
    if (action) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="hall_id" value="${hallId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
{% endblock %} 